<template>
    <div class="crud-container">
        <el-card shadow="never">
            <el-input placeholder="请输入关键字" style="max-width: 280px" />
            <el-button type="primary" class="ml10" @click="onSearch">
                <el-icon>
                    <ele-Search />
                </el-icon>
                查询
            </el-button>
            <el-button type="default" class="ml10">
                <el-icon>
                    <ele-Refresh />
                </el-icon>
                重置
            </el-button>
        </el-card>
        <el-card shadow="never" class="content-box" ref="contentBoxRef">
            <div class="toolbar">
                <el-button type="primary" @click="onOpenAdd">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                    新增
                </el-button>
            </div>
            <el-table :data="tableData" default-expand-all row-key="id" border>
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="部门名称" show-overflow-tooltip />
                <el-table-column prop="sort" label="排序" show-overflow-tooltip />
                <el-table-column label="部门状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == StatusEnum.ENABLE.value" type="success">{{ StatusEnum.ENABLE.label }}</el-tag>
                        <el-tag v-if="scope.row.status == StatusEnum.DISABLE.value" type="warning">{{ StatusEnum.DISABLE.label }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenAdd()">
                            <el-icon>
                                <ele-Plus />
                            </el-icon>
                            新增
                        </el-button>
                        <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">
                            <el-icon>
                                <ele-Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <DeptForm ref="deptFormRef" @refresh="getTableData()" />
        </el-card>
    </div>
</template>
<script setup lang="ts" name="system-dept">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Dept } from '@/api/system/dept/types.ts'
import { getDeptList, getDeptForm, deleteDept } from '@/api/system/dept/index.ts'
import { StatusEnum } from '@/enums/StatusEnum.ts'
const DeptForm = defineAsyncComponent(() => import('./components/DeptForm.vue'))
//表单数据
const tableData = ref<Array<Dept.Row>>([])
//筛选条件
const query = reactive<Dept.Query>({
    keywords: '',
})
//获取表单数据
const getTableData = () => {
    getDeptList(query).then((resp: Dept.Row[]) => {
        tableData.value = resp
    })
}
//搜索
const onSearch = () => {
    getTableData()
}
//添加部门
const deptFormRef = ref()
const onOpenAdd = () => {
    deptFormRef.value.openDialog()
}
//编辑部门
const onOpenEdit = async (row: any) => {
    const dept = await getDeptForm(row.id)
    deptFormRef.value.openDialog(dept)
}
//删除部门
const onTabelRowDel = (row: any) => {
    ElMessageBox.confirm(`此操作将永久删除部门：${row.path}, 是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            deleteDept(row.id)
                .then(() => {
                    ElMessage.success('删除成功')
                    getTableData()
                })
                .catch(() => {
                    ElMessage.error('删除失败')
                })
        })
        .catch(() => {})
}

onMounted(() => {
    getTableData()
})
</script>
